<template>
	<fx-list-filter @on-enter="onSearchClick">
		<template slot="row-1">
			<el-form-item label="工序任务单日期：" label-width="110px">
				<el-date-picker
						v-model="dateRange"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						format="yyyy 年 MM 月 dd 日"
						value-format="yyyy-MM-dd"
						class="form-date-input"
					></el-date-picker>
			</el-form-item>
			<el-form-item label="工序任务单号：" label-width="110px">
				<el-input v-model="code" placeholder="请输入" class="form-input"/>
			</el-form-item>
			<el-form-item label="生产计划单号：" label-width="110px">
				<el-input v-model="productionCode" placeholder="请输入" class="form-input"/>
			</el-form-item>
		</template>
    <template slot="row-2">
			<el-form-item label="生产状态：" label-width="110px">
				<w-select-mulity
					v-model="state"
					:optionlist="stateList"
					:optionProp="optionProp"
					class="form-input"
				>
				</w-select-mulity>
			</el-form-item>
			<el-form-item label="审核状态：" label-width="110px">
				<w-select-mulity
					v-model="busStates"
					:optionlist="programPlanStateList"
					:optionProp="optionProp"
					class="form-input"
				>
				</w-select-mulity>
			</el-form-item>
      <el-form-item label="备注：" label-width="110px">
				<el-input v-model="remark" placeholder="请输入" class="form-input"/>
			</el-form-item>
		</template>
		<template slot="tools">
			<el-button class="order-btn" type="primary" @click="onSearchClick">查询</el-button>
			<el-button class="order-btn" type="text"  @click="onResetClick">重置</el-button>
		</template>
	</fx-list-filter>
</template>
<script>
export default {
	name: 'filterBar',
	data () {
		return {
			optionProp: {
				id: 'id',
				name: 'label',
				value: 'id',
				disabled: 'disabled'
			},
			dateRange: [],
			code: '',
			productionCode: '',
			state: [],
			busStates: [],
			programPlanStateList: this.$fxStateMiddleware.getStateConfig('billState'),
			stateList: this.$fxStateMiddleware.getStateConfig('state'),
			remark: ''
		}
	},
	methods: {
		onSearchClick () {
			this.$emit('on-search', this.getFilterParams())
		},
		onResetClick () {
			this.dateRange = []
			this.code = ''
			this.productionCode = ''
			this.state = []
			this.busStates = []
			this.remark = ''
		},
		getFilterParams () {
			const filterSearch = {
				startDate: (this.dateRange && this.dateRange[0]) || '',
				endDate: (this.dateRange && this.dateRange[1]) || '',
				code: this.code,
				productionCode: this.productionCode,
				states: this.state,
				busStates: this.busStates,
				remark: this.remark
			}
			const params = {}
			Object.keys(filterSearch).forEach(key => {
				if (filterSearch[key] !== '') {
					params[key] = filterSearch[key]
				}
			})
			return {
				...params
			}
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.form-input {
	width: 140px
}
.form-date-input {
	width 400px;
}
</style>
